<template>
  <div class="container">
    <van-nav-bar title="详情"></van-nav-bar>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="image in images" :key="image.id">
        <img v-lazy="image.img_url" width="100%" />
      </van-swipe-item>
    </van-swipe>
    <!-- 信息 -->
    <div class="message">
      <span class="text">{{ info.name }}</span>
      <span class="speak">{{ info.goods_brief }}</span>
      <span class="price">{{ info.retail_price }}</span>
    </div>
    <!-- 相关图片 -->
    <div class="image">
      <p>{{ brand.simple_desc }}</p>
      <img :src="brand.app_list_pic_url" alt="" />
      <img :src="brand.pic_url" alt="" />
    </div>
    <!-- 添加至购物车 -->
    <van-goods-action safe-area-inset-bottom>
      <van-goods-action-icon
        icon="chat-o"
        text="客服"
        dot
      ></van-goods-action-icon>
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="num"
      ></van-goods-action-icon>
      <van-goods-action-icon icon="shop-o" text="店铺"></van-goods-action-icon>
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="toShopCart"
      ></van-goods-action-button>
      <van-goods-action-button
        type="danger"
        text="立即购买"
      ></van-goods-action-button>
    </van-goods-action>
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '80%' }"
      closeable
    >
      <!-- 详情信息 -->
      <div class="particulars">
        <!-- 图片文字区 -->
        <div class="imgandtext">
          <van-card
            :num="psc"
            :price="info.retail_price"
            :desc="info.goods_brief"
            :title="info.name"
            :thumb="info.list_pic_url"
          />
        </div>
        <!-- 属性区 -->
        <div class="proprety">
          <ul v-for="item in specificationList" :key="item.specification_id">
            <span class="name">{{item.name}}</span>
            <li class="i" :class="{active:currentId == value.id}" v-for="value in item.valueList" :key="value.id" @click="changePro(value.id)">
              {{value.value}}
            </li>
          </ul>
        </div>
        <!-- 购买区 -->
        <div class="pay">
          <span>我想买:</span>
          <div>
            <van-stepper v-model="psc" integer />
          </div>
        </div>
      </div>
      <!-- 添加购物车 -->
      <van-submit-bar
        :price="allPrice"
        button-text="添加购物车"
        @submit="onSubmit"
      />
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
import { Lazyload } from "vant";
import { NavBar } from "vant";
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from "vant";
import { Popup } from "vant";
import { SubmitBar } from "vant";
import { Card } from "vant";
import { Stepper } from 'vant';

Vue.use(Stepper);

Vue.use(Card);

Vue.use(SubmitBar);

Vue.use(Popup);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(NavBar);
Vue.use(Lazyload);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  name: "Goods",
  data() {
    return {
      images: [],
      id: "",
      info: {},
      productList: [],
      brand: {},
      //购物车商品总数
      num: 0,
      //购买数量
      psc:0,
      show: false,
      specificationList:[],
      currentId:0
    };
  },
  computed:{
    allPrice(){
      return this.info.retail_price * this.psc * 100
    }
  },
  methods: {
    //获取数据
    async getShop() {
      let result = await this.$API.getShop(this.id);
      console.log(result);
      if (result.errno != 0) {
        alert(result.errmsg);
        return;
      }
      this.images = result.data.gallery;
      this.info = result.data.info;
      this.productList = result.data.productList;
      this.brand = result.data.brand;
      this.specificationList = result.data.specificationList
    },
    //点击添加购物车
    async onSubmit() {
      let { id, productList } = this;
      let result = await this.$API.addShopCart(id, productList[0].id,this.psc);
      if (result.errno != 0) {
        alert("添加失败,请重试");
        return;
      }
      //跳转路由
      this.$router.push("/cart");
    },
    //获取购物车产品数量
    async getShopCartNumber() {
      let result = await this.$API.shopCartNumber();
      if (result.errno != 0) {
        alert("获取购物车产品数量失败");
        return;
      }
      this.num = result.data.cartTotal.goodsCount;
    },
    //点击添加购物车出现弹窗
    toShopCart() {
      this.show = true
    },
    //点击选择
    changePro(cid){
      // let fat = this.specificationList.find((fat)=>{
      //   return fat.specification_id == fid
      // })
      // fat.forEach((che)=>{
         
      // })
      this.currentId = cid
    }
  },
  mounted() {
    let id = this.$route.params.id;
    this.id = id;
    this.getShop();
    this.getShopCartNumber();
    this.$bus.$emit('changeFlag',2)
  },
};
</script>

<style lang="less" scoped>
.container {
  .message {
    margin: 10px 10px;
    span {
      display: block;
      text-align: left;
      margin: 5px auto;
      &.text {
        font-size: 18px;
      }
      &.speak {
        font-size: 14px;
      }
      &.price {
        font-size: 20px;
        color: red;
      }
    }
  }
  .image {
    width: 100%;
    & > * {
      display: block;
      margin: 5px;
    }
    p {
      font-size: 16px;
      font-weight: bold;
    }
    img {
      width: 100%;
    }
  }
  .particulars{
    .pay{
      width: 100%;
      height: 30px;
      text-align: center;
      margin-top: 20px;
      span{
        height: 100%;
        float: left;
        margin-left: 5px;
      }
      div{
        height: 100%;
        float: right;
        margin-right: 5px;
      }
    }
    .proprety{
      margin: 5px;
      ul{
        width: 100%;
        height: 20px;
        margin: 15px 0;
        text-align: center;
        line-height: 20px;
        .name{
          font-weight: bold;
          float: left;
          margin: 0 5px;
        }
        li{
          float: left;
          margin: 0 5px;
          height: 100%;
          text-align: left;
        }
      }
    }
  }
}
&.active{
  border: 1px solid red;
  background-color: #eee;
}
</style>